<template>
    <div class="app-container list">
        <div class="add">
            <span style="margin-left:10px">专题名称：</span>
            <el-input @keyup.enter.native="handleFilter" style="width: 500px;" class="filter-item" placeholder="请输入专题名称进行搜索" v-model="params.topicName" clearable></el-input>
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
            <el-button type="success" icon="el-icon-plus" @click="newTopic">新增专题</el-button>
        </div>
        <el-table
                :data="list"
                v-loading="tableLoading" 
                element-loading-text="数据加载中，请稍后" 
                border fit 
                highlight-current-row
                :default-sort="{prop: 'createTime', order: 'descending'}"
                @sort-change="getSortList"
                
            >
            <el-table-column label="ID" align="center" width="80">
                <template slot-scope="scope">
                   {{scope.row.id}} 
                </template>
            </el-table-column>
            <el-table-column label="专题封图" align="center" width="160">
                <template slot-scope="scope">
                    <img :src="scope.row.cover" align="center" class="pic" />
                </template>
            </el-table-column>
            <el-table-column label="专题名称" align="center">
                <template slot-scope="scope">
                    {{scope.row.topicName}} 
                </template>
            </el-table-column>
            <el-table-column label="浏览数" align="center">
                <template slot-scope="scope">
                    {{scope.row.viewCount}} 
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">
                    {{scope.row.createTime | dateformat('YYYY-MM-DD  HH:mm')}} 
                </template>
            </el-table-column> 
            <el-table-column label="权重" align="center" prop="sort" sortable="custom">
            </el-table-column>
            <el-table-column label="推荐" align="center">
                <template slot-scope="scope">
                    {{scope.row.recommendDesc}} 
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="small" @click="edit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="deleteTopic(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-show="!tableLoading" class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.pageNo" :page-sizes="[10,20,30,50]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog
            title="编辑"
            :visible.sync="showDialog"
            :center="true"
            width="70%"
        >   
            <topic-form v-if="editParams" :addParams="editParams" :shadow="false" @showDailog="isShow" @refresh="topList"></topic-form>
        </el-dialog>
    </div>
</template>

<script>
import topicForm from './components/topicForm'
import { topList, topicDetail, topicDelete } from '@/api/topic'
export default {
  components: {
    topicForm
  },
  data(){
    return{
      list:[],
      params:{
        topicName:'',
        pageNo: 1,
        pageSize: 10
      },
      tableLoading: false,
      total: null,
      showDialog:false,
      editParams: null
    }
  },
  created(){
    this.topList()
  },
  methods:{
    //跳转新增专题页面
    newTopic(){
      this.$router.push('/special/addTopic')
    },
    // 专题列表
    topList(params){
      this.tableLoading = true
      topList(this.params).then(response => {
        const { code, data } = response
        if(code == 0){
          this.list = data.list
          this.tableLoading = false
          this.total = data.total
        }else{
          this.tableLoading = false
        }
      })
    },
    getSortList(filed){
      const { prop, order } = filed
      const { params } = this
      params['sortField'] = prop
      if(prop){
        params['sortWay'] = order == 'descending' ? 'DESC' : 'ASC'
      }else{
        params['sortWay'] = null
      }
      this.params = params
      this.topList()
    },
    // 根据专题名称搜索列表
    handleFilter() {
      this.params.pageNo = 1
      this.params.pageSize = 10
      this.topList()
    },
    //每页几条
    handleSizeChange(val) {
      this.params.pageSize = val
      this.topList()
    },

    //跳转第几页
    handleCurrentChange(val) {
      this.params.pageNo = val
      this.topList()
    },

    //编辑
    edit(row){
      topicDetail({ id: row.id }).then(response => {
        const { code, data } = response
        if(code == 0){
          this.editParams = data
          this.showDialog = true
        }
      })
    },

    //关闭弹框
    isShow(show){
      this.showDialog = show
    },

    // 删除专题
    deleteTopic(index, row){
      const params = {
        id: row.id,
        operateType: 1
      }
      topicDelete(params).then(response => {
        const { code, data } = response
        if(code == 0){
          this.$notify({
            title: '成功',
            message: '专题删除成功',
            type: 'success',
            duration: 2000
          })
          this.list.splice(index, 1)
          this.total--
        }else{
          this.$notify({
            title: '失败',
            message: '删除资讯失败',
            type: 'error',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
    .list{
        .pic{
            width: 136px;
            height: 80px;
        }
        .add{
            // text-align: right;
            :nth-child(4){
              float: right;
              margin-right: 50px;
            }
            padding-bottom: 20px;
        }
        .pagination-container{
            padding-top: 20px;
        }
    }
</style>
